<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>蜻蜓FM</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<style>
			html, body {
				height: 100%;
				background-color: transparent;
			}
			#mask {
				height: 25%;
			}
			#radio-list {
				-webkit-transition: all .3s;
				transition: all .3s;
				-webkit-transform: translateY(100%);
				height: 75%;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-flex-flow: column;
				flex-flow: column;
			}
			#radio-list.in {
				-webkit-transform: translateY(0%);
			}
			#radio-list h2 {
				color: #272930;
				font-size: 16px;
				padding: 14px;
				background-color: #eaeaea;
			}
			
			.padding10{
			padding-left:10px;
			padding-right:10px;
			}
		</style>
	</head>
	<body>
		<div id="mask"></div>
		<div id="radio-list  ">
			<h2>本机已注册用户 <span class="aui-pull-right aui-iconfont aui-icon-close" id="close"  onclick="Close()" tapmode=""></span></h2>
			<!--
			<div class="aui-content">
			<label class="aui-input-addon">本机已注册用户</label>
			<button class="aui-pull-right aui-btn aui-btn-info"><span class="aui-iconfont aui-icon-close"></span>关闭</button>
			<span class="aui-pull-right aui-iconfont aui-icon-close"></span>
			</div>-->
			<div class="aui-content list " id="list">
				<div class="aui-form" id="userlist">
					<div class="aui-input-row">
						<label class="aui-input-addon">胡华成1</label>
						<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo">
					</div>
				</div>
				<script id="template" type="text/x-dot-template">
					{{for(var i=0;i<it.length;i++){}}
					<div class="aui-input-row padding10">
						<label class="aui-input-addon">{{=it[i]}}</label>
						<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo">
					</div>
					{{}}}
				</script>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/zepto.js"></script>
	<script type="text/javascript" src="../script/dot.min.js"></script>
	-
	<script type="text/javascript">
		function Close() {
			var $list = $('#radio-list');
			$list.removeClass('in');
			setTimeout(function() {
				api.closeFrame();
			}, 200);
		}

		var userlist = [];
		//["张鹏1", "张鹏2", "张鹏3", "张鹏4", "张鹏5", "张鹏6", "张鹏7", "张鹏8", "张鹏9", "张鹏10", "张鹏11", "张鹏12"];
		function LoadUserList() {
			api.readFile({
				path : 'fs://userlist.json',
			}, function(ret, err) {
				if (ret.status) {
					userlist = JSON.parse(ret.data);
					var template = document.getElementById('template');
					var list_content = document.getElementById('userlist');
					var pagefn = doT.template(template.text);
					list_content.innerHTML = pagefn(userlist);
				}
				//alert(JSON.stringify(ret));
				//alert(JSON.stringify(userlist));
			});
		}

		function SaveUserList() {
			api.writeFile({
				path : 'fs://userlist.json',
				data : JSON.stringify(userlist)
			}, function(ret, err) {
				//alert(JSON.stringify(ret));
				//alert(JSON.stringify(err));
			});
		}

		apiready = function() {
			//SaveUserList();
			LoadUserList();
			var $list = $('#radio-list');
			$list.addClass('in');
			$(document.body).on('touchend', function(evt) {
				if (!$.contains($list[0], evt.target)) {
					$list.removeClass('in');
					setTimeout(function() {
						api.closeFrame();
					}, 200);
				} else {
					var $close = $('#close');
					var $select = $('#list');
					if ($.contains($close[0], evt.target)) {
						$list.removeClass('in');
						setTimeout(function() {
							api.closeFrame();
						}, 200);
					} else if ($.contains($select[0], evt.target)) {
						//暂时使用，不选用循环方式
						setTimeout(function() {
							var el = $('.aui-radio:checked').prev();
							//alert(arr[0]);
							//var el = $api.prev(arr[0]);
							//alert(el[0]);
							if (el[0]) {
								//alert($api.text(el[0]));
								api.sendEvent({
								name:'ChangeUser',
								extra:$api.text(el[0])
                                },function(ret,err){                                
                                	//api.closeFrame();
                                });
                                $list.removeClass('in');                                
                                setTimeout(function() {                                
									api.closeFrame();
								}, 50);	
							}
						}, 20);
					}
				}
			});
		};
	</script>
</html>